<template>
  <uni-nav-bar title="登记车辆" left-icon="left" @clickLeft="redirectTo('index/mine')" :fixed="true" statusBar></uni-nav-bar>
  <view v-if="hasVehicle" :style="{ width: '100%', height: pageHeight + 'px', overflow: 'auto' }">
    <view class="car_list" v-for="item in list" :key="item.id">
      <view class="car_list_All">
        <view class="car_list_left">
          <image :src="item.image"></image>
          <view>
            <text>{{ item.cart_code }}</text>
          </view>
        </view>
        <view @click="delCar(item.id)" style="display: flex; align-items: center">
          <uni-icons type="trash" size="24"></uni-icons>
          <text style="margin-left: 5rpx; color: #666">删除</text>
        </view>
      </view>
    </view>
  </view>
  <view v-else class="centerImg">
    <image :src="Empty1" style="width: 42%; height: 100px"></image>
    <text>暂无车辆信息</text>
  </view>
  <view class="addCar" @click="() => (isShowPlateKeyboard = true)">新增车辆</view>
  <view v-show="isShowConfirmBox" class="mask-box">
    <view class="inner-mask">
      <Confirm ref="confirmPopup" title="是否删除车辆" @cancel="closeConfirm" @confirm="submit" />
    </view>
  </view>
  <VehiclePlatePad v-if="isShowPlateKeyboard" @cancel="isShowPlateKeyboard = false" @confirm="confirmPlate" />
</template>

<script setup lang="ts">
import { useVehicleStore } from '@/stores/vehicle';
import { redirectTo } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import Confirm from '@c/common/Confirm.vue';
import VehiclePlatePad from '@c/common/VehiclePlatePad.vue';
import { computed, onMounted, ref } from 'vue';
import { isH5 } from '@/utils/platform';
import { Empty1 } from '@/utils/Static';

const vehicleStore = useVehicleStore();
const list = computed(() => vehicleStore.vehicleList);
const hasVehicle = computed(() => list.value.length > 0);
// view
const pageHeight = ref('');
const isShowConfirmBox = ref(false);
const isShowPlateKeyboard = ref(false);
//refs
const confirmPopup = ref(null);
let carID = -1;
onMounted(() => {
  const num=isH5 ? 115 : 148
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - num).toString();
    },
  });
});
function init() {
  showLoading('加载中');
  vehicleStore.getVehicleList();
}
init();
/**
 * 新增车牌并关闭添加车辆弹框
 */
function confirmPlate() {
  init();
  isShowPlateKeyboard.value = false;
}
/**
 * 打开删除车辆弹框
 */
function delCar(num: number) {
  carID = num;
  isShowConfirmBox.value = true;
  confirmPopup.value.open();
}
/**
 * 关闭删除车辆弹框
 */
function closeConfirm() {
  isShowConfirmBox.value = false;
  confirmPopup.value.close();
}
/**
 * 确认删除车辆
 */
function submit() {
  closeConfirm();
  showLoading('正在提交');
  vehicleStore.removeVehicle(carID);
}
</script>

<style scoped lang="less">
@import url('../mine/less/carList.less');
</style>
